{extend name='base'/}

{block name='style'}
<style>
	.text-c {
		text-align: start;
	}
</style>
{/block}

{block name='content'}
<section class="Hui-article-box">
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span
			class="c-gray en">&gt;</span> 栏目管理 <a class="btn btn-success radius r"
	                                              style="line-height:1.6em;margin-top:3px"
	                                              href="javascript:location.replace(location.href);" title="刷新"><i
			class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="pd-20 text-c">
		<article class="page-container">
			<form class="layui-form" action="/admin/article/add/" method="post">
				<div class="layui-form-item">
					<label class="layui-form-label">文章标题</label>
					<div class="layui-input-block">
						<input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
						       autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">文章作者</label>
					<div class="layui-input-inline">
						<input type="text" name="author" required placeholder="请输入作者名称"
						       autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">所属分类</label>
					<div class="layui-input-block">
						<label>
							<select name="category" lay-verify="required">
								<option value=""></option>
								{foreach name='cate' item='vo'}
								<option value="{$vo.id}">{$vo._name}</option>
								{/foreach}
							</select>
						</label>
					</div>
				</div>


				<div class="layui-form-item">
					<label class="layui-form-label">标签</label>
					<div class="layui-input-block">
						{foreach name='tag' item='vo'}
						<input type="checkbox" name="tag[]" title="{$vo.name}" value="{$vo.id}" lay-skin="primary">
						{/foreach}
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">缩略图</label>
					<div class="layui-input-block">
						<div class="layui-upload">
							<button type="button" class="layui-btn" id="thumb">上传图片</button>
							<div class="layui-upload-list">
								<img class="layui-upload-img" id="thumb_file" alt="" width="100px" height="30px">
								<p id="demoText"></p>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">文章描述</label>
					<div class="layui-input-block">
						<textarea name="description" placeholder="请输入内容" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">文章内容</label>
					<div class="layui-input-block">
						<div id="editor"></div>
						<label for="content" style="display: none;"><textarea id="content" name="content" ></textarea></label>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</article>
	</div>
</section>

{/block}

{block name='js'}
<script type="text/javascript" src="/static/admin/lib/wangEditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
    let E = window.wangEditor;
    let editor = new E('#editor');
    let $content = $('#content');
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $content.val(html)
    };
    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
    editor.create();
    $content.val(editor.txt.html());

    //处理上传图片
    layui.use('upload', function () {
        let upload = layui.upload;
        upload.render({
            elem: '#thumb' //绑定元素
            , url: '{:url("/system/component/upload/")}' //上传接口
            , done: function (res) {
                document.getElementById("thumb_file").src = '/' + res.data.path;
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
</script>
{/block}